<div class="pac-page-header">
  <div class="pac-page-title">{{ 'PAC.MENU.MANAGE_FEATURES' | translate: {Default: "Manage Features"} }}</div>

  <div class="flex justify-end items-center p-2">
    <button type="menu" class="btn btn-large btn-primary"
      (click)="upgrade()"
    >{{ 'PAC.KEY_WORDS.Upgrade' | translate: {Default: 'Upgrade'} }}</button>
  </div>

  <nav mat-tab-nav-bar class="pac-tab-nav-bar" color="accent" mat-align-tabs="start" mat-stretch-tabs="false" disableRipple
    [tabPanel]="tabPanel"
  >
    <span mat-tab-link [routerLink]="['./tenant']"
      routerLinkActive #rla="routerLinkActive"
      [routerLinkActiveOptions]="{exact: true}"
      [active]="rla.isActive"
    >
      <mat-icon fontSet="material-icons-outlined" displayDensity="cosy">storage</mat-icon>
      {{ 'PAC.KEY_WORDS.TENANT' | translate: {Default: "Tenant"} }}
    </span>
    <span mat-tab-link [routerLink]="['./organization']"
      routerLinkActive #rla2="routerLinkActive"
      [routerLinkActiveOptions]="{exact: true}"
      [active]="rla2.isActive"
    >
      <mat-icon fontSet="material-icons-outlined" displayDensity="cosy">corporate_fare</mat-icon>
      {{ 'PAC.KEY_WORDS.ORGANIZATION' | translate: {Default: "Organization"} }}
    </span>
  </nav>
</div>
<mat-divider></mat-divider>

<mat-tab-nav-panel #tabPanel class="pac-page-body flex flex-col items-center p-4"
  [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.path">
  <router-outlet #o="outlet"></router-outlet>
</mat-tab-nav-panel>

@if (loading()) {
  <ngm-spin class="absolute top-0 left-0 w-full h-full" />
}